//在 node.js下获取 获取路径
const path = require ('path');
//引用本地 webpack 功能
const webpack = require ('webpack');
//引用clean-webpack-plugin 打包前先清除dist文件夹
const CleanWebpackPlugin = require ('clean-webpack-plugin');
//引用extract-text-webpack-plugin 把 CSS 分离成文件
const ExtractTextPlugin = require ('extract-text-webpack-plugin');

module.exports = {
  module: {
    rules: [
      //配置html加载器
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              minimize: false,
            },
          },
        ],
      },
      //配置ES6加载器
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      //打包样式中背景图
      {
        test: /\.(gif|png|jpg)$/,
        // loader: 'url-loader?limit=8192&name=images/[name].[ext]',
        loader: 'url-loader?limit=1&name=images/[name].[ext]',
        // options: {
        //   publicPath: './images',
        // },
        //limit参数，代表如果小于大约4k则会自动帮你压缩成base64编码的图片,否则拷贝文件到生产目录
        //name后面是打包后的路径；
        //loader 后面 limit 字段代表图片打包限制，这个限制并不是说超过了就不能打包，而是指当图片大小小于限制时会自动转成 base64 码引用
        //上例中大于8192字节的图片正常打包，小于8192字节的图片以 base64 的方式引用。
      },
      //处理SVG文件
      {
        test: /\.(svg)$/,
        use: [
          {
            loader: 'file-loader?limit=1&name=images/[name].[ext]',
            // options: {
            //   name: '[name].[ext]?[hash]',
            //   outputPath: 'img/',
            // },
          },
          // {
          //   loader: 'image-webpack-loader',
          //   options: {
          //     bypassOnDebug: true,
          //   },
          // },
        ],
      },
      //处理字体
      {
        test: /\.(woff2?)$/,
        loader: 'url-loader?limit=10000',
      },
      // 字体文件都放到 fonts 目录中
      {
        test: /\.(woff2?)$/,
        loader: 'url-loader?limit=10000&name=[name].[ext]&outputPath=fonts/',
      },
      {
        test: /\.(ttf|eot)$/,
        loader: 'file-loader?name=[name].[ext]&outputPath=fonts/',
      },
    ],
  },
};
